---
description: Переопределяет базовую адаптивность компонента – глобально или локально.
---

<Overview group="configuration">

# AdaptivityProvider [tag:component]

Переопределяет базовую [адаптивность](/overview/adaptivity) компонента – глобально или локально. Принимает все доступные
[параметры адаптивности](/overview/adaptivity#adaptivity-props).

</Overview>

## Когда использовать? [#when-to-use]

- Если вам нужно зафиксировать размер компонента на `compact` или `regular` (см. [Адаптивность | Размеры элементов интерфейса](/overview/adaptivity#sizes)).
- Если вам нужно зафиксировать конкретный брейкпоинт на мобильный, планшетный, настольный и т.п. (см. [Адаптивность | Размеры экрана](/overview/adaptivity#breakpoints)).
- Если вам нужно зафиксировать поведение компонента (см. [Адаптивность | Наличие точного указателя](/overview/adaptivity#pointer)).

## Логика работы

`AdaptivityProvider` всегда перебивает свой вышестоящий экземпляр – это значит, что свойства не наследуются из контекста.

Говоря о свойствах, по умолчанию они определяются как `undefined`. Автоматически определение есть только у свойств `sizeX` и `sizeY`
при следующих условиях:

- если `sizeX` не задан, но задан `viewWidth`;
- если `sizeY` не задан, но заданы `viewWidth` и `viewHeight` или `viewWidth` и `hasPointer` или только `viewHeight`.

## Глобальное переопределение [#override-global]

Оборачиваем в `AdaptivityProvider` всё приложение.

```jsx filename="index.js" {9}
import { ConfigProvider, AdaptivityProvider, AppRoot, ViewWidth } from '@vkontakte/vkui';

/**
 * Зашили верстку и поведение под настольные экраны.
 */
export function AlwaysDesktopWithMouse() {
  return (
    <ConfigProvider>
      <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
        <AppRoot>{/* приложение */}</AppRoot>
      </AdaptivityProvider>
    </ConfigProvider>
  );
}
```

## Локальное переопределение [#override-local]

В необходимом месте отдельно оборачиваем компонент или ряд компонентов в `AdaptivityProvider`.

```jsx {8}
import { AdaptivityProvider, Button } from '@vkontakte/vkui';

/**
 * Зашили высоту кнопки в "regular" размере.
 */
export function ReallyBigButton() {
  return (
    <AdaptivityProvider sizeY="regular">
      <Button size="l">Я действительно большая кнопка</Button>
    </AdaptivityProvider>
  );
}
```

## Хук useAdaptivity [#use-adaptivity]

Хук возвращает из контекста свойства, переданные в `AdaptivityProvider`.

```jsx filename="example.jsx"
import { AdaptivityProvider, useAdaptivity } from '@vkontakte/vkui';

function AdaptivityPropsByContext() {
  const {
    sizeX = 'undefined',
    sizeY = 'undefined',
    viewWidth = 'undefined',
    viewHeight = 'undefined',
    hasPointer = 'undefined',
  } = useAdaptivity();

  return (
    <pre>
      sizeX: {sizeX}, sizeY: {sizeY}, viewWidth: {viewWidth}, viewHeight: {viewHeight}, hasPointer:{' '}
      {hasPointer}
    </pre>
  );
}

// На странице увидим такой вывод
//
// sizeX: compact, sizeY: undefined, viewWidth: undefined, viewHeight: undefined, hasPointer: undefined
export function App() {
  return (
    <AdaptivityProvider sizeX="compact">
      <AdaptivityPropsByContext />
    </AdaptivityProvider>
  );
}
```

<Callout>
  Для создание адаптивных интерфейсов лучше использовать более гибкие утилиты (см. [Адаптивность |
  Утилиты для создания адаптивных интерфейсов](/overview/adaptivity#utils)).
</Callout>

## Свойства и методы [#api]

<PropsTable name="AdaptivityProvider">

### AdaptivityProvider [#adaptivity-provider-api]

### useAdaptivity [#use-adaptivity-api]

</PropsTable>
